<style lang="stylus" scoped>
  .z_index_10
    z-index 10
  .login_con
    width 400px
    background-color rgba(256,256,256,.9)
    right 80px
    top 30px
</style>

<template>
  <div>
    <transition-group
      appear
      enter-active-class="animated slideInRight"
      leave-active-class="animated slideInLeft">
      <q-card v-if="isWhere === 'register'" key="register" class="fixed z_index_10 login_con q-pa-sm">
        <q-card-section class="q-pa-sm row justify-center">
          <q-img style="width:70%" src="statics/app_nav_logo.png"/>
        </q-card-section>
        <q-card-section class="q-pa-sm">
          <q-input
            v-model="registerForm.companyName"
            :error="$v.registerForm.companyName.$error"
            @blur="$v.registerForm.companyName.$touch"
            bottom-slots
            :label="$t('企业名称')">
            <template v-slot:prepend>
              <q-icon name="business" class="text-primary"/>
            </template>
            <template v-slot:error>
              {{ $t('企业名称不能为空') }}
            </template>
            <template v-slot:append v-if="!!registerForm.companyName">
              <q-icon name="close" @click="registerForm.companyName = ''" class="cursor-pointer" />
            </template>
          </q-input>
          <q-input
            v-model="registerForm.email"
            :error="$v.registerForm.email.$error"
            @blur="$v.registerForm.email.$touch"
            bottom-slots
            :hint="$t('需要验证该邮箱属于您')"
            :label="$t('电子邮箱')">
            <template v-slot:prepend>
              <q-icon name="email" class="text-primary"/>
            </template>
            <template v-slot:error>
              {{ $t('电子邮箱不能为空') }}
            </template>
            <template v-slot:append v-if="!!registerForm.email">
              <q-icon name="close" @click="registerForm.email = ''" class="cursor-pointer" />
            </template>
          </q-input>
          <q-input
            bottom-slots
            v-model="registerForm.validateCode"
            :label="$t('验证码')"
            :hint="$t('验证码将会以邮件的形式发送到您的邮箱')"
            maxlength="6">
            <template v-slot:prepend>
              <q-icon name="textsms" class="text-primary"/>
            </template>
            <template v-slot:append v-if="!!registerForm.validateCode">
              <q-icon name="close" @click="registerForm.validateCode = ''" class="cursor-pointer" />
            </template>
            <template v-slot:after>
              <q-btn dense flat color="primary" :label="$t('获取验证码')" />
            </template>
          </q-input>
          <q-input
            ref="password"
            v-model="registerForm.password"
            :label="$t('账户密码')"
            :error="$v.registerForm.password.$error"
            @blur="$v.registerForm.password.$touch"
            bottom-slots
            :hint="$t('使用 6 个或更多字符（字母、数字和符号的组合）')"
            :type="isPwd ? 'password' : 'text'">
            <template v-slot:prepend>
              <q-icon name="lock" class="text-primary"/>
            </template>
            <template v-slot:error>
              {{ $v.registerForm.password.required ? $t('账户密码不能少于6个字符'): $t('账户密码不能为空') }}
            </template>
            <template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>
        </q-card-section>
        <q-card-actions>
          <q-btn type="submit" class="full-width" color="primary">{{ $t('立即注册') }}</q-btn>
          <q-btn class="full-width q-mt-md" color="secondary" @click="toLogin">{{ $t('返回登录') }}</q-btn>
        </q-card-actions>
      </q-card>
    </transition-group>
  </div>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators'
export default {
  data () {
    return {
      isPwd: true,
      isWhere: 'register',
      // register
      registerForm: {
        companyName: '',
        email: '',
        validateCode: '',
        password: ''
      }
    }
  },
  validations: {
    registerForm: {
      companyName: { required },
      email: { required, email },
      password: { required }
    }
  },
  watch: {

  },
  methods: {
    toLogin () {
      this.$router.push({ path: '/account/login' })
    }
  }
}
</script>
